<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../src/xr-ui.css" />
  <title>Loading加载提示组件</title>
</head>

<body>
  <div class="xr-content">
    <!-- 页面加载提示组件 -->
    <h1 class="xr-panel-title">页面加载提示组件</h1>
    <div class="xr-panel-body">
      <div class="xr-loading">
        <i class="fa fa-circle-o-notch fa-spin xr-loading-icon"></i>
        <span class="xr-loading-info">用力载入中...</span>
      </div>
    </div>
    <!-- 单行加载提示组件 -->
    <h1 class="xr-panel-title">单行加载提示组件</h1>
    <div class="xr-panel-body">
      <div class="xr-loading">
        <i class="fa fa-refresh xr-loading-icon"></i>
        <span class="xr-loading-info">加载出错，点我重新加载</span>
      </div>
    </div>
    <!-- 列表加载提示工具 -->
    <h1 class="xr-panel-title">列表加载提示工具</h1>
    <div class="xr-panel-body">
      <div class="xr-loading-inline">
        <span class="xr-loading-info">
          <i class="fa fa-circle-o-notch fa-spin xr-loading-icon"></i>
          用力加载中
        </span>
      </div>
      <div class="xr-loading-inline">
        <span class="xr-loading-info">
          上拉加载更多
          <i class="fa fa-long-arrow-up fa-vibrate-y xr-loading-icon"></i>
        </span>
      </div>
      <div class="xr-loading-inline">
        <span class="xr-loading-info">
          我是有底线的
        </span>
      </div>
      <div class="xr-loading-inline">
        <span class="xr-loading-info">
          *
        </span>
      </div>
    </div>
</body>

</html>